﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仓储管理系统 - 动态背景登录</title>
    <!-- 引入Vue和Element Plus -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus@2.3.14/dist/index.full.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus@2.3.14/dist/index.css">
    <!-- 引入图标库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        html, body, #app {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            /* 升级渐变背景，更柔和高级 */
            background: linear-gradient(135deg, #00bfa5 0%, #00897b 100%);
            background-attachment: fixed;
            overflow: hidden;
        }

        /* 背景装饰元素 */
        .bg-decoration {
            position: fixed;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 0;
            cursor: pointer; /* 添加指针样式，提示可交互 */
        }

        .bg-circle {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.08);
            transition: transform 0.3s ease-out;
            will-change: transform;
        }

        .login-card {
            background-color: rgba(255, 255, 255, 0.95); /* 不透明卡片，提升质感 */
            padding: 40px 35px;
            border-radius: 16px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
            width: 100%;
            max-width: 420px;
            z-index: 1;
            /* 卡片悬浮动画 */
            transition: all 0.3s ease;
        }

            .login-card:hover {
                box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2);
                transform: translate(-50%, -50%) translateY(-5px);
            }

        /* 系统标题样式 */
        .title {
            text-align: center;
            margin-bottom: 35px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(0, 191, 165, 0.2);
        }

            .title h1 {
                font-size: 28px;
                color: #00897b;
                margin-bottom: 8px;
                font-weight: 600;
                display: flex;
                align-items: center;
                justify-content: center;
            }

                .title h1 i {
                    margin-right: 12px;
                    font-size: 32px;
                }

            .title h4 {
                font-size: 16px;
                color: #78909c;
                font-weight: 400;
                letter-spacing: 1px;
            }

        /* 表单样式 */
        .login-form {
            width: 100%;
            margin: 0;
        }

        .el-form-item {
            margin-bottom: 25px;
            position: relative;
        }

        .el-form-item__label {
            color: #4a5568 !important;
            font-size: 15px !important;
            font-weight: 500 !important;
        }

        /* 输入框样式优化 */
        .el-input__wrapper {
            background-color: #f8f9fa !important;
            border: 1px solid #dee2e6 !important;
            border-radius: 8px !important;
            transition: all 0.3s ease !important;
        }

            .el-input__wrapper:focus-within {
                border-color: #00bfa5 !important;
                box-shadow: 0 0 0 3px rgba(0, 191, 165, 0.15) !important;
                background-color: #fff !important;
            }

        .el-input__inner {
            color: #2d3748 !important;
            font-size: 15px !important;
            height: 46px !important;
            line-height: 46px !important;
            padding-left: 15px !important;
        }

        .el-input__prefix {
            color: #00bfa5 !important;
            font-size: 18px !important;
        }

        /* 图标位置调整 */
        .input-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #00bfa5;
            font-size: 18px;
            z-index: 1;
        }

        .el-input__inner {
            padding-left: 45px !important;
        }

        /* 按钮样式升级 */
        .el-button--primary {
            width: 100%;
            height: 48px;
            font-size: 16px !important;
            font-weight: 500 !important;
            border-radius: 8px !important;
            background-color: #00bfa5 !important;
            border: none !important;
            transition: all 0.3s ease !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

            .el-button--primary:hover {
                background-color: #00897b !important;
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(0, 191, 165, 0.3);
            }

            .el-button--primary:active {
                transform: translateY(0);
            }

            .el-button--primary.is-loading .el-loading-spinner {
                margin-right: 8px !important;
            }

        /* 加载动画优化 */
        .el-loading-spinner {
            width: 20px !important;
            height: 20px !important;
        }

        /* 消息提示位置调整 */
        .el-message {
            top: 20px !important;
        }

        /* 响应式适配 */
        @@media (max-width: 768px) {
            .login-card

        {
            padding: 30px 25px;
            margin: 0 20px;
        }

        .title h1 {
            font-size: 24px;
        }

        .el-form-item {
            margin-bottom: 20px;
        }

        }

        /* 底部辅助链接 */
        .form-footer {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
            font-size: 14px;
        }

            .form-footer a {
                color: #00bfa5;
                text-decoration: none;
                transition: color 0.3s ease;
            }

                .form-footer a:hover {
                    color: #00897b;
                    text-decoration: underline;
                }

        /* 控制面板样式 */
        .control-panel {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(255, 255, 255, 0.9);
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            z-index: 2;
            width: 220px;
            display: none; /* 默认隐藏 */
            animation: fadeIn 0.3s ease;
        }

            .control-panel.show {
                display: block; /* 显示时设置为block */
            }

        @@keyframes fadeIn {
            from

        {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }

        }

        .control-panel h3 {
            margin-bottom: 10px;
            color: #00897b;
            font-size: 16px;
        }

        .control-item {
            margin-bottom: 10px;
        }

            .control-item label {
                display: block;
                margin-bottom: 5px;
                font-size: 14px;
                color: #4a5568;
            }

        .el-slider {
            width: 100%;
        }

        .reset-btn {
            width: 100%;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 背景装饰 -->
        <div class="bg-decoration" ref="bgDecoration" v-on:dblclick="toggleControlPanel"></div>

        <!-- 控制面板 -->
        <div class="control-panel" :class="{ show: showControlPanel }">
            <h3>背景圆圈控制</h3>
            <div class="control-item">
                <label>圆圈数量: {{ circleCount }}</label>
                <el-slider v-model="circleCount" :min="1" :max="30" v-on:change="updateCircles"></el-slider>
            </div>
            <div class="control-item">
                <label>鼠标排斥力: {{ repulsionForce }}</label>
                <el-slider v-model="repulsionForce" :min="10" :max="500" :step="10"></el-slider>
            </div>
            <div class="control-item">
                <label>移动速度: {{ movementSpeed }}</label>
                <el-slider v-model="movementSpeed" :min="0.1" :max="5" :step="0.1"></el-slider>
            </div>
            <el-button class="reset-btn" type="primary" v-on:click="resetCircles">重置圆圈</el-button>
        </div>

        <div class="login-card">
            <!-- 系统标题 -->
            <div class="title">
                <h1><i class="fa fa-cubes" aria-hidden="true"></i>福泰仓储管理系统</h1>
                <h4>Warehouse Management System</h4>
            </div>

            <!-- 登录表单 -->
            <el-form ref="loginFormRef" :model="loginForm" :rules="rules" class="login-form">
                <el-form-item label="用户名" prop="username">
                    <i class="fa fa-user input-icon" aria-hidden="true"></i>
                    <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <i class="fa fa-lock input-icon" aria-hidden="true"></i>
                    <el-input v-model="loginForm.password" type="password" placeholder="请输入密码"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" v-on:click ="handleLogin" :loading="isLoading">
                        <i class="fa fa-sign-in" aria-hidden="true"></i> 登录系统
                    </el-button>
                </el-form-item>

                <!-- 底部辅助链接（可选） -->
                <div class="form-footer">
                    <a href="javascript:;">忘记密码?</a>
                    <a href="javascript:;">联系管理员</a>
                </div>
            </el-form>
        </div>
    </div>

    <script>
        const { createApp, ref, reactive, onMounted, onUnmounted } = Vue;
        const { ElMessageBox, ElMessage } = ElementPlus;

        const app = createApp({
          setup() {
            const loginFormRef = ref(null);
            const bgDecoration = ref(null);
            const isLoading = ref(false); // 加载状态
            const animationId = ref(null);
            const showControlPanel = ref(false); // 控制面板显示状态

            // 控制参数
            const circleCount = ref(12);
            const repulsionForce = ref(50);
            const movementSpeed = ref(0.5);

            // 圆圈状态数组
            const circles = reactive([]);

            // 鼠标位置
            const mousePos = reactive({
              x: 0,
              y: 0
            });

            // 登录表单数据（默认用户名和密码，方便开发）
            const loginForm = reactive({
              username: 'admin',
              password: 'admin'
            });

            // 表单验证规则
            const rules = reactive({
              username: [
                { required: true, message: '请输入用户名', trigger: 'blur' },
                { min: 3, message: '用户名长度至少为3个字符', trigger: 'blur' }
              ],
              password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                { min: 3, message: '密码长度至少为3个字符', trigger: 'blur' }
              ],
            });

            // 切换控制面板显示状态
            const toggleControlPanel = () => {
              showControlPanel.value = !showControlPanel.value;
            };

             // 登录处理（原有逻辑完全保留）
            const handleLogin = () => {
            // 防止重复点击
            if (isLoading.value) {
                return;
            }

            loginFormRef.value.validate(valid => {
                if (valid) {
                // 设置加载状态
                isLoading.value = true;

                // 验证通过，发送登录请求
                axios.post('/Login/Login', {
                    UserName: loginForm.username,
                    Password: loginForm.password,
                })
                .then(res => {
                    if (res.data.code === 200) {
                    ElMessage.success("登录成功");
                    // 存储用户信息
                    sessionStorage.setItem('YH', JSON.stringify(res.data.data));
                    // 跳转到首页
                    setTimeout(() => {
                        window.location.href = '/Main/Index';
                    }, 100);
                    } else {
                    ElMessage.error(res.data.msg || '登录失败');
                    }
                })
                .catch(err => {
                    console.error('登录错误:', err);
                    ElMessage.error('登录失败，请重试');
                })
                .finally(() => {
                    // 无论成功失败，都取消加载状态
                    isLoading.value = false;
                });
                } else {
                return false;
                }
            });
            };


            // 创建圆圈
            const createCircles = (count) => {
              // 清空现有圆圈
              circles.length = 0;
              bgDecoration.value.innerHTML = '';

              for (let i = 0; i < count; i++) {
                const circle = document.createElement('div');
                circle.className = 'bg-circle';

                // 随机大小 (50-200px)
                const size = Math.random() * 250 + 10;
                circle.style.width = `${size}px`;
                circle.style.height = `${size}px`;

                // 随机位置
                const x = Math.random() * (window.innerWidth - size);
                const y = Math.random() * (window.innerHeight - size);
                circle.style.left = `${x}px`;
                circle.style.top = `${y}px`;

                // 随机移动速度
                const vx = (Math.random() - 0.5) * movementSpeed.value;
                const vy = (Math.random() - 0.5) * movementSpeed.value;

                // 随机透明度
                const opacity = Math.random() * 0.1 + 0.05;
                circle.style.backgroundColor = `rgba(255, 255, 255, ${opacity})`;

                bgDecoration.value.appendChild(circle);

                // 存储圆圈状态
                circles.push({
                  element: circle,
                  x,
                  y,
                  vx,
                  vy,
                  size
                });
              }
            };

            // 更新圆圈数量
            const updateCircles = () => {
              createCircles(circleCount.value);
            };

            // 重置圆圈
            const resetCircles = () => {
              createCircles(circleCount.value);
            };

            // 动画循环
            const animate = () => {
              circles.forEach(circle => {
                // 更新位置
                circle.x += circle.vx * movementSpeed.value;
                circle.y += circle.vy * movementSpeed.value;

                // 边界检测和反弹
                if (circle.x <= 0 || circle.x >= window.innerWidth - circle.size) {
                  circle.vx = -circle.vx;
                  circle.x = circle.x <= 0 ? 0 : window.innerWidth - circle.size;
                }

                if (circle.y <= 0 || circle.y >= window.innerHeight - circle.size) {
                  circle.vy = -circle.vy;
                  circle.y = circle.y <= 0 ? 0 : window.innerHeight - circle.size;
                }

                // 应用位置
                circle.element.style.left = `${circle.x}px`;
                circle.element.style.top = `${circle.y}px`;

                // 鼠标排斥效果
                const dx = circle.x + circle.size/2 - mousePos.x;
                const dy = circle.y + circle.size/2 - mousePos.y;
                const distance = Math.sqrt(dx * dx + dy * dy);

                // 如果鼠标在圆圈附近，施加排斥力
                if (distance < repulsionForce.value) {
                  const force = (repulsionForce.value - distance) / repulsionForce.value;
                  const angle = Math.atan2(dy, dx);

                  // 计算排斥力方向
                  const fx = Math.cos(angle) * force * 5;
                  const fy = Math.sin(angle) * force * 5;

                  // 应用排斥力到速度
                  circle.vx += fx * 0.05;
                  circle.vy += fy * 0.05;

                  // 限制最大速度
                  const speed = Math.sqrt(circle.vx * circle.vx + circle.vy * circle.vy);
                  const maxSpeed = 3;
                  if (speed > maxSpeed) {
                    circle.vx = (circle.vx / speed) * maxSpeed;
                    circle.vy = (circle.vy / speed) * maxSpeed;
                  }
                }
              });

              animationId.value = requestAnimationFrame(animate);
            };

            // 鼠标移动事件
            const handleMouseMove = (e) => {
              mousePos.x = e.clientX;
              mousePos.y = e.clientY;
            };

            // 窗口大小变化事件
            const handleResize = () => {
              // 重新创建圆圈以适应新窗口大小
              createCircles(circleCount.value);
            };

            // 组件挂载后执行
            onMounted(() => {
              createCircles(circleCount.value);
              animate();

              // 添加事件监听器
              document.addEventListener('mousemove', handleMouseMove);
              window.addEventListener('resize', handleResize);
            });

            // 组件卸载前执行
            onUnmounted(() => {
              if (animationId.value) {
                cancelAnimationFrame(animationId.value);
              }
              document.removeEventListener('mousemove', handleMouseMove);
              window.removeEventListener('resize', handleResize);
            });

            return {
              loginFormRef,
              loginForm,
              rules,
              handleLogin,
              isLoading,
              bgDecoration,
              circleCount,
              repulsionForce,
              movementSpeed,
              updateCircles,
              resetCircles,
              showControlPanel,
              toggleControlPanel
            };
          }
        });
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html>